<template>
  <el-tabs type="border-card" class="content-tabs">
    <el-tab-pane label="用户管理">
      <el-card class="content-card">
        <template #header>
          <div class="card-header">
            <span>用户管理</span>
          </div>
        </template>

        <div class="content-box">
          <el-table
            :data="userList"
            style="width: 100%; margin-top: 20px"
            stripe
            row-key="userId"
          >
            <el-table-column
              type="index"
              width="80"
            />
            <el-table-column
              prop="userAccount"
              label="账号"
              show-overflow-tooltip
            />
            <el-table-column
              prop="userName"
              label="用户姓名"
              show-overflow-tooltip
              width="160"
            />            
            <el-table-column
              prop="userRole"
              label="角色"
              width="80"
            />
            <el-table-column
              prop="userCompany"
              label="公司"
              show-overflow-tooltip
            />
            <el-table-column
              prop="userTelephone"
              label="电话"
              show-overflow-tooltip
              width="160"
            />
            <el-table-column
              prop="userStatus"
              label="状态"
              width="80"
            />
            <el-table-column label="操作" width="180">
              <template #default="scope">
                <el-button
                  type="primary"
                  size="small"
                  v-if="scope.row.userStatus==='待审核'"
                  @click="handleUser(scope.row,'已通过')"
                >
                  通过
                </el-button>
                <el-button
                  type="warning"
                  size="small"
                  v-if="scope.row.userStatus==='待审核'"
                  @click="handleUser(scope.row,'未通过')"
                >
                  拒绝
                </el-button>
                <el-button
                  type="warning"
                  size="small"
                  v-if="scope.row.userStatus==='已通过'"
                  @click="handleUser(scope.row,'已冻结')"
                >
                  冻结
                </el-button>
                <el-button
                  type="warning"
                  size="small"
                  v-if="scope.row.userStatus==='已冻结'"
                  @click="handleUser(scope.row,'已通过')"
                >
                  解冻
                </el-button>
                <el-button
                  type="warning"
                  size="small"
                  v-if="scope.row.userStatus==='未通过'||scope.row.userStatus==='已冻结'"
                  @click="deleteUser(scope.row)"
                >
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>

          <el-pagination
            :total="total"
            current-page="currentPage"
            :page-size="10"
            :pager-count="8"
            layout="total, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handlePageChange"
            class="pagination-container"
          />
        </div>
      </el-card>
    </el-tab-pane>
  </el-tabs>
</template>

<script setup>
  import { ElMessageBox,ElMessage } from 'element-plus'
  import { ref,reactive,onMounted } from 'vue'
  import { 
    GetUserListServer,
    AuditUserServer,
    DeleteUserServer,
  } from '@/api/instance'

  onMounted(()=>{
    fetchUserList();
  })

  const userList=reactive([
  ])
  
  const currentPage = ref(1)
  const total=ref(0)
  const fetchUserList=async (page=1) => {
    currentPage.value=page;
    try{
      const res = await GetUserListServer();
      if(res.code===0){
        const allData=res.data||[];
        total.value=allData.length;
        const start=(page-1)*10;
        const end=start+10;
        userList.splice(0,userList.length,...allData.slice(start,end));
      }else{
        ElMessage.error(res.message || '获取退订列表失败')  
      }
    }catch(error){
      ElMessage.error(error.message || '网络请求失败1')
    }
  }
  const handleUser =async (row,status) => {
    try{
      const res = await AuditUserServer({
        userId:row.userId,
        userStatus:status
      })
      if(res.code===0){
        ElMessage.success('用户审批成功')
        fetchUserList();
      }else{
        ElMessage.error(res.message || '用户审批失败')
      }
    }catch(error){
      ElMessage.error(error.message || '网络请求失败2')
    }
  }
  const deleteUser =async (row) => {
    ElMessageBox.confirm('确定删除该用户吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }).then(async () => {
      try{
        const res = await DeleteUserServer({
          userId:row.userId,
        })
        if(res.code===0){
          ElMessage.success('用户删除成功')
          fetchUserList();
        }else{
          ElMessage.error(res.message || '用户删除失败')
        }
      }catch(error){
        ElMessage.error(error.message || '网络请求失败2')
      }
    })
  }
  // 处理每页显示条目数变化
  const handleSizeChange = (pageSize) => {
    // 可以在这里添加逻辑来处理每页显示条目数的变化
      console.log(`每页显示条目数变为: ${pageSize}`);
  };
  // 处理已创建社团分页变化
  const handlePageChange = (newPage) => {
      fetchUserList(newPage);
  };
</script>

<style lang="scss" scoped>
  .content-tabs{
    height: 95%;
    width: 95%;
    margin: 15px auto;//原来为20px，现在为15px
    .content-card{
      height: 95%;
      margin: 20px;
      .card-header{
        font-size: 18px;
        font-weight: bold;
      }
      .search-form{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin-bottom: 15px;
        :deep(.el-select){
          width: 200px;
          margin-right: 20px;
        }
      }
      .content-box{
        .pagination-container{
          display: flex;
          justify-content: center;
          margin-top: 30px
        }
      }
    }
  }
  .el-tab-pane {
    height:100%;
  }
  .el-form {
    padding: 20px;
  }
  .el-form-item {
    margin-bottom: 60px; /* 原默认值为 25px，可调大数值 */
    margin-right:45%;
    margin-left:5%;
  }
</style>